<template>
  <div class="page">
    <Navbar title="帮服详情" />
    <div class="content">
      <div class="record-item">
        <div class="f-r a-c">
          <div class="label-title">{{ detail.projectName }}</div>
          <div class="button1">{{ detail.tableName }}</div>
        </div>
        <div v-if="detail.types === 0" class="label">
          咨询类型：{{ detail.typeName }}
        </div>
        <div v-if="detail.types === 0">
          问题描述：{{ detail.content }}
        </div>
        <div v-if="detail.types === 1" class="label">
          变更描述：{{ detail.content }}
        </div>
        <div v-if="detail.types === 2" class="label">
          联报类型：{{ detail.gTypeName }}
        </div>
        <div v-if="detail.types === 2" class="label">
          联报内容：{{ detail.guaranty }}
        </div>
        <div v-if="detail.types === 2" class="label">
          需求描述：{{ detail.content }}
        </div>
        <div class="label">
          附件资料：
          <div v-for="(item,index) in detail.files" :key="index" @click="downloadFile(item.fileUrl,item.fileName)">
            {{ item.fileName }}.{{ item.fileType }}
          </div>
        </div>
        <div class="label">
          状态：<span>{{ detail.statusName }}</span>
        </div>
        <div class="line" />
        <div class="steps">
          <van-steps direction="vertical" :active="Math.abs(status - 2)">
            <van-step v-if="status === 2">
              <div class="f-r a-c">
                <div class="steps-name">完成</div>
                <div class="handle-button" @click="routerJump">去评价</div>
              </div>
              <div class="step-time">{{ detail.updateTime }}</div>
            </van-step>
            <van-step v-if="status > 1">
              <div class="steps-name">受理</div>
              <div v-for="(item,index) in detail.answers" :key="index">
                <div class="step-label" style="margin-bottom: 0">
                  帮服工作人员：{{ item.createBy || '' }}
                </div>
                <div class="step-label f-r a-c">
                  回复内容：
                  <div>
                    <div style="color: #2F86FD">
                      {{ item.answer || '' }}
                    </div>
                  </div>
                </div>
                <div class="step-label" style="margin-bottom: 0">
                  回复附件：<div style="color: #2F86FD" class="downloadbox">
                    <div v-for="(item2, index2 ) in getName(item.file)" :key="index2" @click="downloadFile(item2.fileUrl,item2.fileName)">
                      {{ item2. fileName }}.{{ item2.fileType }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="step-time">{{ detail.updateTime }}</div>
            </van-step>
            <van-step>
              <div class="steps-name">提交问题</div>
              <div class="step-time">
                {{ detail.createTime }}
              </div>
            </van-step>
          </van-steps>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { http_help_serve } from '@/api'
import { helpGType, qsStatus, qsType } from '@/eumn'
import axios from 'axios'

export default {
  name: 'Help',
  data() {
    return {
      detail: {}
    }
  },
  computed: {
    status() {
      if (this.detail.status === 0) {
        return 1
      } else if (this.detail.status === 2) {
        return 0
      } else if (this.detail.status === 1) {
        return 2
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    routerJump() {
      this.$router.push({
        path: '/my-evaluation-create',
        query: {
          id: this.detail.id,
          projectId: this.detail.projectId,
          tableName: this.detail.tableName,
          types: this.detail.types,
          vconsole: true
        }
      })
    },
    getList() {
      const { id, types } = this.$route.query
      http_help_serve.helpDetail({
        id,
        // userId,
        types
      }).then(res => {
        this.detail = {
          ...res.data,
          files: (res.data.file === '' || res.data.file === null) ? [] : JSON.parse(res.data.file),
          types: Number(res.data.types),
          gTypeName: helpGType.getName(res.data.gtype),
          statusName: qsStatus.getName(res.data.status)
        }
      })
    },
    getName(str) {
      const list = (str === '' || str === null) ? [] : JSON.parse(str)
      return list
    },
    downloadFile(url, name) {
      if (url == null) {
        return
      }
      // 个人赋值
      //  params = { taskCommonId: this.commonId };
      const fileName = url
      let fileTypeMime = '' // 文件mime类型
      // url = `${window._CONFIG['domianURL']}trial/task/plan/common/getFileByTaskCommonId`;
      let suffix = fileName.split('.') // split后获得文件后缀
      suffix = suffix[suffix.length - 1]
      switch (suffix) { // switch获取后缀对应的mime 可参考上文链接
        case 'png': fileTypeMime = 'image/png'; break
        case 'doc': fileTypeMime = 'application/msword'; break
        case 'docx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'; break
        case 'jpg': case 'jpeg': fileTypeMime = 'image/jpeg'; break
        case 'gif': fileTypeMime = 'image/gif'; break
        case 'svg': fileTypeMime = 'image/svg+xml'; break
        case 'tif': case 'tiff': fileTypeMime = 'image/tiff'; break
        case 'txt': fileTypeMime = 'text/plain'; break
        case 'ppt': fileTypeMime = 'application/vnd.ms-powerpoint'; break
        case 'pptx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.presentationml.presentation'; break
        case 'xls': fileTypeMime = 'application/vnd.ms-excel'; break
        case 'xlsx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; break
        case 'zip': fileTypeMime = 'application/zip'; break
        case '7z': fileTypeMime = 'application/x-7z-compressed'; break
      }
      console.log('=======')
      axios.get(
        url,
        { params: {},
          responseType: 'blob' } // 一定要设置响应类型，否则文件会是空白
      // params: params,
      ).then((data) => {
        console.log(data);
        const content = data // arraybuffer类型数据
        const resBlob = new Blob([content.data])
        const reader = new FileReader()
        reader.readAsText(resBlob, 'utf-8')
        reader.onload = () => {
          try { // 判断是否可以转化为json格式，可以就说明不是文件流，错误返回值
            const res = JSON.parse(reader.result)
            console.log(res)
            this.$message.destroy()
            this.$message.error(res.message)
          } catch { // 报错说明不能转化为json，是文件流，下载文件
            console.log('res status', data)
            // let blob = new Blob([data]); // 原 此种方式在pc端可以下载，但是手机端不行
            const blob = new Blob([data.data], {
              // eslint-disable-next-line no-undef
              'type': fileTypeMime
            })
            const blobUrl = window.URL.createObjectURL(blob)
            const a = document.createElement('a')
            a.style.display = 'none'
            a.download = name
            a.href = blobUrl
            a.click()
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.record-item {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    border-bottom: 1px solid #C5C5C5;
    .line {
        margin-top: 18px;
        margin-bottom: 10px;
        height: 1px;
        background-color: #C5C5C5;
    }
    .label-title {
        line-height: 20px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        margin-bottom: 15px;
        margin-right: 15px;
    }
    .link {
        height: 12px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #2F86FD;
    }
    .label {
        height: 12px;
        font-size: 12px;
        color: #333333;
        margin-bottom: 15px;
    }

    .button1 {
        color: #2B80FF;
        width: 59px;
        // height: 24px;
        background: #D8E8FF;
        border: 1px solid #2F86FD;
        border-radius: 10px;
        text-align: center;
        font-size: 12px;
        line-height: 22px;
        margin-bottom: 15px;
    }
    .status {
        width: 50px;
        height: 21px;
        line-height: 21px;
        font-size: 12px;
        color: #fff;
        border-radius: 0px 10px 0px 0px;
        position: absolute;
        right: 0;
        top: 0;
        text-align:center;
    }
    .status1 {
        background: #4B93FE;
    }
    .status2 {
        background: #20B153;
    }
}
::v-deep .steps-name{
  font-size: 18px;
}

</style>
